<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search">
			<view class="search-bar">
				<view class="search-left">
					<uni-icons type="scan" size="20" color="#ff6700"></uni-icons>
				</view>
				<input class="search-input" :placeholder="searchPlaceholder" @tap="tapSearch" disabled />
				<view class="search-right">
					<uni-icons type="search" size="20" color="#ff6700" @tap="tapSearch"></uni-icons>
				</view>
			</view>
			<view class="type_list">
				<view class="navs flex" style="overflow: hidden;position: relative;">
					<scroll-view scroll-x class="bg-white nav" style="width: 90%;" :scroll-left="scrollLeft">
						<view class="cu-item" style="height: 60rpx;line-height: 60rpx;"
							:class="index==TabCur?'text-orange cur':''" v-for="(item,index) in catalog" :key="index"
							@tap="topTabSelect" :data-id="index" :data-catId="item.catId">
							<!-- {{item.brandName}} -->
							{{item.name}}
						</view>
					</scroll-view>
					<view class="flex justify-center align-center nav_type bg-white"
						style="width: 10%;box-shadow: -2rpx 0rpx 5rpx 0rpx #dcdcdc;" @tap="isFilter = !isFilter">
						<text class="lg cuIcon-unfold  text-gray"></text>
					</view>
				</view>
				<view v-if="isFilter" class="t_model" style="z-index: 99;">
					<view class="bg-white justify-between flex padding-left-lg align-center"
						style="height: 62rpx;width: 100%;overflow: hidden;">
						<text class="text-black">全部分类</text>
						<view class="flex justify-center align-center nav_type padding-lr-lg" style="height: 80%;"
							@tap="isFilter = !isFilter">
							收起 <text class="lg cuIcon-fold  text-gray"></text>
						</view>
					</view>
					<view class="cu-list grid col-5" style="font-size: 24rpx;">
						<view class="padding-lr-xs margin-bottom-sm" v-for="(item,index) in catalog" :key="index">
							<view class="padding-tb-xs"
								:style="{'background-color':index==TabCur?'#FFEBF1':'#F5F6FA','color':index==TabCur?'#FF0F23':'#505259',}"
								style="border-radius: 6rpx;" @tap="topTabSelect" :data-id="index" :data-catId="item.catId">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			
			</view>
		</view>
		




		<!-- 促销模块（直播/百亿补贴/秒杀） -->
		<!-- <view class="promotion-list">
			<view class="promotion-item" v-for="(item, index) in promotionList" :key="index">
				<image class="promotion-img" :src="item.img" mode="widthFix"></image>
				<view class="promotion-title">{{item.title}}</view>
				<view class="promotion-price">{{item.price}}</view>
			</view>
		</view> -->

		<!-- 优惠券/活动横幅 -->
		<view class="coupon-banner">
			<text class="banner-title">天猫双11 | 券后低至7.7折起</text>
			<text class="banner-btn">去抢购 <text class="cuIcon-right"></text></text>

		</view>

		<!-- 消费券包/购物金 -->
		<view class="coupon-section">
			<view class="coupon-card">
				<text class="card-title">消费券包</text>
				<text class="card-price">¥480</text>
				<text class="card-desc">共2张券可领 双11 闪购 旅行</text>
			</view>
			<view class="coupon-card">
				<text class="card-title">购物金限时膨胀</text>
				<text class="card-desc">券后低至7.3折起</text>
			</view>
		</view>

		<!-- 商品推荐区 -->
		<view class="goods-list" v-if="goodsList.length > 0">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @tap="topDetail(item)">
				<image class="goods-img" :src="item.skuImg" mode="widthFix"></image>
				<view class="goods-info">
					<text class="goods-name">{{item.skuTitle}}</text>
					<text class="goods-price">
						<text style="font-size: 24rpx;">￥</text>
						{{item.skuPrice}}
					</text>
				</view>
			</view>

		</view>
		<view v-else class="flex justify-center align-center" style="height: 45vh">
			暂无想要的宝贝，试试搜索其他的吧...
		</view>



	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 功能入口数据
				funcList: [{
						icon: 'shop',
						text: '淘工厂'
					},
					{
						icon: 'hongbao',
						text: '红包签到'
					},
					{
						icon: 'coin',
						text: '领淘金币'
					},
					{
						icon: 'home',
						text: '芭芭农场'
					},
					{
						icon: 'cart',
						text: '天猫超市'
					},
					{
						icon: 'activity',
						text: '活动'
					},
				],
				// 促销模块数据
				promotionList: [{
						img: '../../static/images/ok.png',
						title: '双11 淘宝直播',
						price: '¥779 直播价'
					},
					{
						img: '../../static/images/ok.png',
						title: '双11 百亿补贴',
						price: '¥68.85 补贴价'
					},
					{
						img: '../../static/images/ok.png',
						title: '双11 淘宝秒杀',
						price: '¥16.82 秒杀价'
					},
				],
				// 商品推荐数据
				goodsList: [],

				queryFrom: {
					pageNum: 1,
					brandId: "",
					attrs: "",
					shopId: "",
					keyword: "",
					catalog3Id: "",
					catalog1Id: "",
					sort: 'saleCount_desc',
					hasStock: "",
					skuPrice: "",
					_queryString: "",
				},
				productList: {},

				searchPlaceholder: '',
				placeholderNum: 0,
				placeholderList: ['华为', '手机', 'iPhone', '电视'],


				catalog: [{
					catId: '',
					name: '推荐'
				}],
				TabCur: 0,
				scrollLeft: 0,
				isFilter: false,
			}
		},
		onLoad() {
			this.getCatalog()
			this.getProdustList()

		},
		onReady() {
			if (this.placeholderList.length > 0) {
				this.searchPlaceholder = this.placeholderList[0];
				setInterval(() => {
					if (this.placeholderNum + 1 < this.placeholderList.length) {
						this.searchPlaceholder = this.placeholderList[this.placeholderNum + 1]
						this.placeholderNum++

					} else {
						this.placeholderNum = 0
						this.searchPlaceholder = this.placeholderList[this.placeholderNum]
					}
				}, 5000)
			}

		},
		methods: {
			// 获取推荐商品列表
			getProdustList() {






				this.$Request.get('/app/product/skuinfo/searchProductList', this.queryFrom).then(res => {
					if (res.code == 0 && res.data.products) {
						this.productList = res.data
						// console.log(this.productList.total);
						// this.goodsList = res.data.products
						if (this.queryFrom.pageNum == 1) {
							this.goodsList = res.data.products
						} else {
							this.goodsList = [...this.goodsList, ...res.data.products]
						}
					} else {
						this.goodsList = []
					}

				});
			},



			getCatalog() {
				this.$Request.get('/app/product/skuinfo/getCatalog1').then(res => {
					if (res.code == 0) {

						const processArray = (arr) => {
							return arr.map(item => {
								// 定义需要检测的符号（顿号、逗号）
								const symbolRegex = /[、]/;
								// 判断是否包含符号
								if (symbolRegex.test(item.name)) {
									// 截取第一个符号前的内容
									const firstPart = item.name.split(symbolRegex)[0];
									return {
										...item,
										name: firstPart
									};
								}
								return item;
							});
						};
						this.catalog = [...this.catalog, ...processArray(res.data)];
					}

				});
			},


			topTabSelect(e) {
				this.isFilter = false;
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60 - 150;

				this.queryFrom.pageNum = 1;
				this.queryFrom.catalog1Id = e.currentTarget.dataset.catid;
				this.getProdustList();
			},

			//跳转搜索页面
			tapSearch() {
				uni.navigateTo({
					url: '/shopping/shoppSearch/index?placeholder=' + this.searchPlaceholder
				})
			},

			//跳转详情页
			topDetail(item) {
				uni.navigateTo({
					url: '/shopping/shoppDetail/index?skuId=' + item.skuId
				})
			},
		},
		onReachBottom: function() {
			if (this.productList.total == this.goodsList.length) {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
			} else {
				this.queryFrom.pageNum = this.queryFrom.pageNum + 1;
				this.getProdustList()
			}
		},
		onPullDownRefresh: function() {
			this.queryFrom.pageNum = 1;
			this.getProdustList()
		},



	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 100rpx;
		/* 底部TabBar高度 */
		background-color: #fff;
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	/* 搜索栏 */
	.search {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 99;
		padding: 0 10rpx;
		background-color: #fff;
	}

	.search-bar {
		display: flex;
		align-items: center;
		border: 4rpx solid #ff6700;

		border-radius: 30rpx;
		padding: 10rpx 20rpx;

	}

	.search-left {
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		color: #fff;
		background: transparent;
		transition: 1s all;
	}

	.search-right {
		margin-left: 10rpx;
	}


	/* 促销模块 */
	.promotion-list {
		display: flex;
		justify-content: space-between;
		margin: 10rpx;
	}

	.promotion-item {
		width: 32%;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.promotion-img {
		width: 100%;
		height: auto;
	}

	.promotion-title {
		font-size: 28rpx;
		color: #333;
		padding: 10rpx;
		font-weight: bold;
	}

	.promotion-price {
		font-size: 24rpx;
		color: #ff6700;
		padding: 0 10rpx 10rpx;
	}

	/* 优惠券横幅 */
	.coupon-banner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ff3b30;
		color: #fff;
		padding: 20rpx;
		margin: 10rpx;
		border-radius: 16rpx;
		margin-top: 150rpx;
	}

	.banner-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.banner-btn {
		font-size: 24rpx;
		color: #fff;
	}

	/* 消费券包/购物金 */
	.coupon-section {
		display: flex;
		justify-content: space-around;
		margin: 10rpx;
	}

	.coupon-card {
		width: 48%;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.card-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #ff6700;
		margin-bottom: 10rpx;
	}

	.card-price {
		font-size: 32rpx;
		color: #ff3b30;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.card-desc {
		font-size: 24rpx;
		color: #666;
	}

	/* 商品推荐区 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 10rpx;

		padding: 0 10rpx;
	}

	.goods-item {
		width: 49%;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.goods-img {
		width: 100%;
		height: auto;
	}

	.goods-info {
		padding: 10rpx;
	}

	.goods-name {
		font-size: 24rpx;
		color: #333;
		line-height: 36rpx;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods-price {
		font-size: 28rpx;
		color: #ff6700;
		font-weight: bold;
	}

	/* 底部TabBar */
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-top: 1rpx solid #eee;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tab-icon {
		font-size: 40rpx;
		margin-bottom: 5rpx;
	}

	.tab-text {
		font-size: 24rpx;
		color: #999;
	}

	.cu-item {
		padding: 0 6rpx;
	}

	.type_list {
		width: 100%;
		position: relative;
	}

	.t_model {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
	}
</style>